<template>
	<!--文章目录-->
	<div class="ui segments m-toc toc-wrapper m-box tocbot" >
		<div class="ui secondary segment" >
			<i class="list ul icon" style="font-size: 1.2em;"></i>
			<span style="font-size: 1.3rem;">本文目录</span>
		</div>
		<div class="ui segment" style="font-size: 1.1rem;">
			<div ref="tocbot" class="js-toc" style="line-height: 1.375rem;"></div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'

	export default {
		name: "Tocbot",
		data() {
			return{
				account : 0,
				href:"",
			}
			
		},
		computed: {
			...mapState(['isBlogRenderComplete'])
		},
		mounted() {
			// 有可能组件创建比较慢，文章渲染已经完成，watch的时候，isBlogRenderComplete已经是true，监听不到 isBlogRenderComplete 的改变，也就不会执行watch中的方法
			// 就需要在 mounted 中init
			if (window.document.querySelector('.js-toc-content')) {
				this.initTocbot()
			};
			

			// //监听点击事件，收起导航菜单
			
			// 	document.addEventListener('click', (e) => {
			// 		//遍历冒泡
					
			// 		let flag = e.path.some(item => {
			// 			if (item === this.$refs.tocbot) return true
			// 		})
			// 		// console.log("flag",flag,"show")
			// 		// console.log()
			// 		//如果导航栏是打开状态，且点击的元素不是Nav的子元素，则收起菜单
					
			// 		if (flag) {
			// 			this.href = window.location.href.toString();		
			// 			console.log(this.href)
			// 		}
					
			// 		// console.log(window.location.href.toString())
			// 	})
			// 	if(window.location.href.toString() != this.href){
			// 		this.account ++
			// 		console.log(this.account)
			// 	}
		
		},
		watch: {
			//文章渲染完成时，生成目录
			isBlogRenderComplete() {
				if (this.isBlogRenderComplete) {
					this.initTocbot()
				}
			}
		},
		methods: {
			initTocbot() {
				tocbot.init({
					// Where to render the table of contents.
					tocSelector: '.js-toc',
					// Where to grab the headings to build the table of contents.
					contentSelector: '.js-toc-content',
					// Which headings to grab inside of the contentSelector element.
					headingSelector: 'h1,h2,h3,h4',
					// Element to add the positionFixedClass to.
					positionFixedSelector: '.tocbot',
					// Smooth scrolling enabled.
					scrollSmooth: true,
					// Smooth scroll duration.
					scrollSmoothDuration: 420,
					//到顶部导航条的距离
					scrollSmoothOffset: -15,
					// Headings offset between the headings and the top of the document (this is meant for minor adjustments).
					// Can also be used to account for scroll height discrepancies from the use of css scroll-padding-top
					headingsOffset: -18,
					
				})
			}
		}
	}
</script>

<style>
	.m-toc {
		z-index: 5 !important;
	}

	.toc {
		overflow-y: auto
	}

	.toc > ul {
		overflow: hidden;
		position: relative
	}

	.toc > ul li {
		list-style: none
	}

	.toc-list {
		list-style-type: none;
		margin: 0;
		padding-left: 10px
	}

	.toc-list li a {
		display: block;
		padding: 0.4375rem 0;
		/* font-weight: 500; */
	}

	.toc-list li a:hover {
		/* color: #b71c1c; */
		/* font-size: large; */
		font-weight: 700;
	}

	a.toc-link {
		color: currentColor;
		height: 100%
	}

	.is-collapsible {
		max-height: 1000px;
		overflow: hidden;
		transition: all 300ms ease-in-out
	}

	.is-collapsed {
		max-height: 0
	}

	.is-position-fixed {
		position:sticky !important;
		top: 10px;
	}

	.is-active-link {
		font-weight:700;
		font-size: 1.3rem;
		color: #17a2b8 !important;
	}

	.toc-link::before {
		background-color: #EEE;
		content: ' ';
		display: inline-block;
		height: 0;
		left: 0;
		margin-top: -1px;
		position: absolute;
		width: 2px;
	}

	.is-active-link::before {
		background-color: #54BC4B
	}
</style>